<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素</title>
    <style>
        img {
            width: 300px;
        }
        /* 5.
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        .close {
            position: absolute;
            top: 1px;
            right: 20px;
            width: 30px;
            height: 30px;
        } */
        /* 6.
        .box {
            position: relative;
            width: 340px;
            margin: 0 auto;
        }
        
        #taobao {
            width: 200px;
            height: 200px;
        }
        
        .btn-close {
            position: absolute;
            top: -7px;
            left: -10px;
        } */
    </style>
</head>

<body>
    <!-- 1.显示当前系统时间 -->
    <!--  <button>显示当前系统时间</button>
    <div class="timer">某个时间</div>
    <script>
        //当我们点击了按钮 div里面的文字发生变化
        //首先获取元素
        var btn = document.querySelector('button');
        var divElem = document.querySelector('.timer')
            //注册事件
        btn.onclick = function() {
            divElem.innerText = getDate();
        }

        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var months = date.getMonth() + 1;
            var days = getDate();
            return '今天是' + year + '年,' + months + '月' + days + '日';
        }
    </script> -->

    <!-- 2.修改元素属性 -->
    <!-- <button id="wje">王嘉尔</button>
    <button id="sg">帅哥</button>
    <img src="../images/1.jpg" alt="" title="王嘉尔">
    <script> -->
    <!--  //获取元素    -->
    <!-- /*  var wje = document.getElementById('wje');
        var sg = document.getElementById('sg');
        var img = document.querySelector('img'); */
        //注册事件
       /*  wje.onclick = function() {
            img.src = '../images/1.jpg';
            img.title = '王嘉尔';
        }
        sg.onclick = function() {
            img.src = '../images/3.jpg';
            img.title = '帅哥';
        }
    </script> */ -->


    <!-- 3.分时显示不同的图片,显示不同的问候语 -->
    <!--  <img src="../images/pic1.jpg" alt="">
    <div>上午好</div>
    <script>
        //获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        //得到当前的小时数
        var date = new Date();
        var h = date.getHours();
        //判断小时数,改变文字信息
        if (h < 12) {
            img.src = '../images/pic2.jpg';
            div.innerHTML = '上午好';
        } else if (h < 18) {
            img.src = '../images/pic3.jpg';
            div.innerHTML = '下午好';
        } else {
            img.src = '../images/pic4.jpg';
            div.innerHTML = '晚上好';
        }
    </script> -->

    <!-- 4.表单元素的属性操作 -->
    <!-- <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //注册事件 处理程序
        btn.onclick = function() {
            input.value = '被点击了';
            //如果想要某个表单被禁用,不可以再点击,就用disabled
            // btn.disabled = true;
            this.disabled = true;
            // this指向事件函数的调用者
        }
    </script> -->

    <!-- 5.仿京东隐藏密码明文案例 -->
    <!-- 核心思想:点一次切换为文本框(能看见)再点一次切换为密码框(看不见) -->
    <!-- 算法：利用flag的值，如果是1，就切换为文本框，设置为0，如果是0切换为密码框，设置为1 -->
    <!--  <div class="box">
        <label for="">
            <img src="../images/pic1.jpg" alt="" class="close">
        </label>
        <input type="password" name="" id="">
    </div>
    <script>
        var flag = 1;
        //获取元素
        var input = document.querySelector('input');
        var img = document.querySelector('img');
        //绑定事件 处理程序
        img.onclick = function() {
            if (flag == 1) {
                input.type = 'text';
                img.src = '../images/pic2.jpg';
                flag = 0;
            } else if (flag == 0) {
                input.type = 'password';
                img.src = '../images/pic1.jpg';
                flag = 1;
            }
        }
    </script> -->

    <!-- 6.案例关闭淘宝二维码 -->
    <!-- 核心思路:利用显示和隐藏,display:none隐藏元素 display:block显示元素  点击按钮 让二维码盒子隐藏-->
    <!-- <div class="box"> -->
    <!-- 淘宝二维码 -->
    <!--    <img src="../images/pic3.jpg" alt="" id="taobao">
        <i class="btn-close">x</i>
    </div>
    <script>
        var box = document.querySelector('.box');
        var btnclose = document.querySelector('.btn-close');
        btnclose.onclick = function() {
            box.style.display = 'none';
        }
    </script> -->


</body>

</html>